<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>熊馨的个人站</title>
    <!--引入外链字体-->
    <script type="text/javascript" src="https://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script>
</head>

<!--设置外链字体-->
<script type="text/javascript">
    $youziku.load("body", "4d55f13043ba47468bc4dbd8d5c8da6a", "LiDeBiao-Xing3");
    $youziku.draw();
</script>

<body>
    <div class="container">
        <!--section-1-->
        <section class="section-1">
            <!--标题-->
            <div class="section-1__title section-1__title_animate_init">
                <img src="src/images/title.png" alt="标题">
            </div>
            <!--背景切换-->
            <div class="section-1__bgSwitch section-1__bgSwitch_animate_init" id="section-1__bgSwitch">
                <span>
                    <img src="src/images/bgChange1.png" alt="切换背景图标">
                </span>
                <span>
                    <img src="src/images/bgChange2.png" alt="切换背景图标">
                </span>
                <span>
                    <img src="src/images/bgChange3.png" alt="切换背景图标">
                </span>
                <span>
                    <img src="src/images/bgChange4.png" alt="切换背景图标">
                </span>
                <div class="section-1__bgSwitch-tips">点击</div>
            </div>

            <!--图片切换-->
            <div class="section-1__sliderImg section-1__sliderImg_animate_init">
                <!--切换按钮-->
                <input id="select-img-1" name="radio-set-1" type="radio" class="select-img-1" checked />
                <label for="select-img-1" class="label-img-1">壹</label>

                <input id="select-img-2" name="radio-set-1" type="radio" class="select-img-2" />
                <label for="select-img-2" class="label-img-2">贰</label>

                <input id="select-img-3" name="radio-set-1" type="radio" class="select-img-3" />
                <label for="select-img-3" class="label-img-3">叁</label>

                <input id="select-img-4" name="radio-set-1" type="radio" class="select-img-4" />
                <label for="select-img-4" class="label-img-4">肆</label>

                <!--图片区域-->
                <div class="slider-bgimg clearfix">
                    <div>
                        <span>Slice 1 - Image 1</span>
                        <span>Slice 1 - Image 2</span>
                        <span>Slice 1 - Image 3</span>
                        <span>Slice 1 - Image 4</span>
                    </div>
                    <div>
                        <span>Slice 2 - Image 1</span>
                        <span>Slice 2 - Image 2</span>
                        <span>Slice 2 - Image 3</span>
                        <span>Slice 2 - Image 4</span>
                    </div>
                    <div>
                        <span>Slice 3 - Image 1</span>
                        <span>Slice 3 - Image 2</span>
                        <span>Slice 3 - Image 3</span>
                        <span>Slice 3 - Image 4</span>
                    </div>
                    <div>
                        <span>Slice 4 - Image 1</span>
                        <span>Slice 4 - Image 2</span>
                        <span>Slice 4 - Image 3</span>
                        <span>Slice 4 - Image 4</span>
                    </div>
                </div>

                <!--文字标题-->
                <div class="slider-title">
                    <p>困难的时候笑一个就好啦笑一个!</p>
                    <p>一旦约定至死也要遵守!</p>
                    <p>交朋友就要交那种即使变成老头了也能互叫绰号的!</p>
                    <p>人生和游戏里都充满BUG!</p>
                </div>
            </div>
        </section>

        <section class="section-2">
            <!--导航部分-->
            <nav class="section-2__nav clearfix">
                <a href="javascript:;" class="section-2__nav-item section-2__nav-item_status_active">首页</a>
                <a href="javascript:;" class="section-2__nav-item">关于我</a>
                <a href="javascript:;" class="section-2__nav-item">技能</a>
                <a href="javascript:;" class="section-2__nav-item">项目</a>
                <a href="javascript:;" class="section-2__nav-item">联系我</a>
                <div class="section-2__nav-tip"></div>
            </nav>

            <!--中间主题内容-->
            <div class="section-2__title"></div>
            <div class="section-2__description">
                <p>我们没那么弱小，但是也并不强大。</p>
            </div>
            <div class="section-2__photo">
                <img src="src/images/me.png" alt="" style="width:175px">
                <p>熊馨，湖北武汉</p>
                <p>前端开发</p>
            </div>
            <div class="section-2__icon" id="section-2__icon">
                <div class="section-2__icon-1 current">生活</div>
                <div class="section-2__icon-2">学业</div>
                <div class="section-2__icon-3">工作</div>
            </div>
            <div class="section-2__content" id="section-2__content">
                <img src="src/images/about-left.png" alt="生活" class="show">
                <img src="src/images/about-xueye.png" alt="学业">
                <img src="src/images/about-work.png" alt="工作">
            </div>
            <div class="section-2__line"></div>
        </section>

        <!--section-3-->
        <section class="section-3">
            <div class="section-3__title"></div>
            <div class="section-3__description">
                <p>人想要活下去，梦想和金钱，都是必需品。</p>
            </div>
            <!--canvas圆环-->
            <div class="section-3__circle" id="section-3__circle"></div>
            <!--技能内容-->
            <div class="section-3__content" id="section-3__content">
                <p class="section-3__content__tips">移上去<br />看看？</p>
                <div class="section-3__content__main">
                    <div>
                        <h4 class="skill">技能</h4>
                        <p>1.能使用HTML，CSS，CSS3实现静态页面和动画效果。</p>
                        <p>2.能使用HTML5，canvas绘制图像。</p>
                        <p>3.能使用JavaScript（es5,es6）语言，以及面对对象思维编程。</p>
                        <p>4.能使用bootstrap、easyui、iView等ui框架。</p>
                        <p>5.能使用vue2.0,angular1.0,react等项目构建框架（近期使用vue较多）。</p>
                        <p>6.能使用npm,bower等node包管理工具。</p>
                        <p>7.能使用gulp,webpack等项目构建自动化工具(近期使用webpack较多)。</p>
                        <p>8.能使用git来管理项目代码。</p>
                        <p>9.常用编辑器：vscode,webstrom,Atom,sublime。</p>
                        <p>10.工具：基本的ps操作(切图，抠图等),基本的axure画原型。</p>
                    </div>

                    <div>
                        <h4 class="zhengshu">证书</h4>
                        <p>1.大学英语四级证书</p>
                        <p>2.日本语能力考N1证书</p>
                        <p>3.计算机二级证书</p>
                        <p>4.会计从业资格证书</p>
                        <p>5.商务策划师（三级）证书</p>
                        <p>6.驾照</p>
                    </div>
                </div>
            </div>
            <!--图钉-->
            <div class="section-3__tuding-1"></div>
            <div class="section-3__tuding-2" id="tuding2"></div>
            <!--分界线-->
            <div class="section-3__line"></div>
        </section>

        <!--section-4-->
        <section class="section-4">
            <div class="section-4__title"></div>
            <div class="section-4__description">
                <p>循环往复的四季，是不死心的昨天和可选择的每一天,</p>
                <p>紧紧合成了明天。</p>
            </div>
            <div class="section-4__carrousel">
                <div class="section-4__carrousel-item">
                    <img src="src/images/response.png" alt="项目预览图">
                    <div class="mask">
                        <img src="src/images/response-icon.png" alt="icon">
                        <p>个人练习</p>
                        <p>响应式网页</p>
                        <p>所用技术：CSS3媒体查询</p>
                    </div>
                    <a href="https://kumayato.github.io/Projects-responsiveWeb-1/" target="_blank"></a>
                </div>
                <div class="section-4__carrousel-item">
                    <img src="src/images/react.png" alt="项目预览图">
                    <div class="mask">
                        <img src="src/images/react-icon.png" alt="icon">
                        <p>个人练习</p>
                        <p>新闻站点</p>
                        <p>所用技术：React</p>
                    </div>
                    <a href="https://kumayato.github.io/Projects-ReactNews/" target="_blank"></a>
                </div>
                <div class="section-4__carrousel-item">
                    <img src="src/images/fly.png" alt="项目预览图">
                    <div class="mask">
                        <img src="src/images/fly-icon.png" alt="icon">
                        <p>参与项目</p>
                        <p>iFlyCloud无人机云平台</p>
                        <p>所用技术：Angular1.x</p>
                    </div>
                    <a href="http://fly.cigem.cn" target="_blank"></a>
                </div>
                <div class="section-4__carrousel-item">
                    <img src="src/images/phone.png" alt="项目预览图">
                    <div class="mask">
                        <img src="src/images/phone-icon.png" alt="icon">
                        <p>个人练习</p>
                        <p>手机网站宣传页面</p>
                        <p>所用技术：CSS3过渡与动画</p>
                    </div>
                    <a href="https://kumayato.github.io/Projects-mobile-ad/" target="_blank"></a>
                </div>
                <div class="section-4__carrousel__arrow">
                    <div class="arrow arrow-prev">
                        <img src="src/images/arrow-prev.png" alt="左箭头">
                    </div>
                    <div class="arrow arrow-next">
                        <img src="src/images/arrow-next.png" alt="右箭头">
                    </div>
                </div>
            </div>

            <div class="section-4__line"></div>
        </section>

        <!--footer-->
        <section class="section-5">
            <div class="section-5__title"></div>
            <div class="section-5__description">
                <p>有什么不好，就算迟了，也要努力到最后!</p>
            </div>
            <div class="section-5__touchMe">
                <div class="section-5__touchMe__github">
                    <a href="https://github.com/kumayato" target="_blank" title="点击跳转"></a>
                    <div class="outer"></div>
                    <div class="inner">
                        <img src="src/images/github-me.png" alt="github头像">
                        <p>kuma</p>
                    </div>
                </div>
                <div class="section-5__touchMe__right clearfix">
                    <div class="section-5__touchMe__qq">
                        <div class="outer"></div>
                        <div class="inner" title="点击复制" id="qqbtn">
                            <p id="qq">543872989</p>
                        </div>
                    </div>
                    <div class="section-5__touchMe__mail">
                        <div class="outer"></div>
                        <div class="inner" title="点击复制" id="emailbtn">
                            <p id="email">15872358009@163.com</p>
                        </div>
                    </div>
                    <div class="section-5__touchMe__mobile">
                        <div class="outer"></div>
                        <div class="inner" title="点击复制"  id="mobilebtn">
                            <p id="mobile">15872358009</p>
                        </div>
                    </div>
                    <div class="section-5__touchMe__blog">
                        <a href="http://blog.csdn.net/kumayato" target="_blank" title="点击跳转"></a>
                        <div class="outer"></div>
                        <div class="inner">
                            <p>CSDN</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="section-5__panda">
                <p>很感谢您看到这里!</p>
            </div>
        </section>
    </div>

    <!--侧边导航栏-->
    <aside class="asideNav asideNav_animate_init">
        <a href="javascript:;" class="asideNav__item asideNav__item_status_active">首页</a>
        <a href="javascript:;" class="asideNav__item">关于我</a>
        <a href="javascript:;" class="asideNav__item">技能</a>
        <a href="javascript:;" class="asideNav__item">项目</a>
        <a href="javascript:;" class="asideNav__item">联系我</a>
    </aside>

    <!--回到顶部-->
    <div class="backTop backTop_animate_init"></div>

    <!--导航背景-->
    <div class="nav-bg"></div>

    <!--点击复制-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>